<script setup lang="ts">
import {reactive, ref,getCurrentInstance} from 'vue'
import {useI18n} from 'vue-i18n'
import {userSignApi,userLoginApi} from '@/api/login'
import {IResultOr} from '@/api/interface'
import {useRouter} from 'vue-router'
import useFormProperties from '@/composables/login/useFormProperties'
import useFormOperates from '@/composables/login/useFormOperates'

const router = useRouter()//官方hook
const {t} = useI18n()//官方hook
const {ruleForm,loginText,ruleFormRef,activeName} =  useFormProperties(t)//自定义hook
const {userSign,userLogin} = useFormOperates(router,ruleForm)//自定义hook
function handleClick(e:any){
  let {name} = e.props
  loginText.value = t(`login['${name}Btn']`)
}
function submitForm(){
  ruleFormRef.value.validate((valid:any)=>{
    if(valid){
      if(activeName.value == 'sign'){
        userSign(ruleForm)
      }else if(activeName.value == 'login'){
        userLogin(ruleForm)
      }
    }else{
      return false
    }
  })
}
</script>

<template>
  <div class="login-page">
  <div class="left-part"></div>
    <div class="right-part">
   <div class="login-panel">
     <!--  tabs-->
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane :label="t('login.loginTab')" name="login"></el-tab-pane>
       <el-tab-pane :label="t('login.signTab')" name="sign"></el-tab-pane>
     </el-tabs>
     <!--  表单组件-->
     <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules"  >
       <el-form-item  prop="mobile">
         <el-input :placeholder="t('login.placeMobile')" v-model="ruleForm.mobile" />
       </el-form-item>
       <el-form-item  prop="password">
         <el-input type="password" :placeholder="t('login.placePass')" v-model="ruleForm.password" />
       </el-form-item>
       <el-form-item>
         <el-button class="login-btn" type="primary" @click="submitForm">{{loginText}}</el-button>
       </el-form-item>
     </el-form>
   </div>
   </div>

  </div>
</template>

<style lang="scss">
@import "@/assets/scss/login/index.scss";
</style>
